<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/iconfont.css">
		<style>
			html,body {
				background-color: #efeff4;
			}
			
			.sdc-top-bar{
			  	background-color: #333;
			  	color:#fff;
			 }
			 #left-menu {
			 	color:#fff; 	
			 }
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav sdc-top-bar">
			<button id="left-menu" class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-bars"></span><span>尚都城</span>
			</button>
			<h1 id="title" class="mui-title"></h1>
			<button id="left-menu" class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-right">
				<span id="goShopCart" class="mui-icon iconfont icon-chaoshi"></span>
			</button>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a id="defaultTab" class="mui-tab-item mui-active" href="view/main/index.html">
				<span class="mui-icon iconfont icon-zhuye"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="view/shop/index.html">
				<span class="mui-icon iconfont icon-chaoshi"></span>
				<span class="mui-tab-label">购物</span>
			</a>
			<a class="mui-tab-item" href="view/find/index.html">
				<span class="mui-icon iconfont icon-tansuob"></span>
				<span class="mui-tab-label">服务</span>
			</a>
			<a class="mui-tab-item" href="view/me/index.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/_API.js"></script>
		<script type="text/javascript" charset="utf-8">
			var menu = null,main = null;
			var showMenu = false;
			
			var subpages = ['view/main/index.html','view/shop/index.html','view/find/index.html','view/me/index.html'];
			var subpage_style = {
				top: '44px',
				bottom: '50px'
			};
			
			mui.init({
				swipeBack:false//关闭右滑关闭功能
			});
			
			//创建子页面，首个选项卡页面显示，其它均隐藏；
			mui.plusReady(function(){
				var self = plus.webview.currentWebview();
				for(var i=0;i<4;i++){
					var sub = plus.webview.create(subpages[i],subpages[i],subpage_style);
					if(i>0){
						sub.hide();
					}
					self.append(sub);
				}
				
				main = plus.webview.currentWebview();
				main.addEventListener('maskClick', function(){
					closeMenu();
				});
				//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
				setTimeout(function() {
					menu = mui.preload({
						id: 'index-menu',
						url: 'index-menu.html',
						styles: {
							left: 0,
							width: '70%',
							zindex: -1
						},
						show: {
							aniShow: 'none'
						}
					});
				}, 200);
			});
			
			//当前激活选项
			var activeTab = subpages[0];
			var title = document.getElementById("title");
			//选项卡点击事件
			mui('.mui-bar-tab').on('tap', 'a', function(e) {
				var targetTab = this.getAttribute('href');
				if (targetTab == activeTab) {
					return;
				}
				//更换标题
				//title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
				//显示目标选项卡
				plus.webview.show(targetTab);
				//隐藏当前;
				plus.webview.hide(activeTab);
				//更改当前活跃的选项卡
				activeTab = targetTab;
				
				if(targetTab == "view/me/index.html") {
					//newWindow("view/_people/login.html");
					return ;
				}
			});
			
			//自定义事件，模拟点击“首页选项卡”
			document.addEventListener('gohome',function () {
				var defaultTab = document.getElementById("defaultTab");
				//模拟首页点击
				mui.trigger(defaultTab,'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if(defaultTab!==current){
					current.classList.remove('mui-active');
					defaultTab.classList.add('mui-active');
				}
			});
			document.getElementById('goShopCart').addEventListener('tap', function() {
			  //打开关于页面
			  mui.openWindow({
			    url: 'view/shop/shopcart.html', 
			    id:'shopcart',
				styles: {
					top: 0,
					bottom: 0,
					zindex: 999999
				}
			  });
			});
		</script>
		<script src="js/init.js"></script>
	</body>
</html>